// 座位管理页面的JavaScript功能

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化座位管理功能
    initSeatManagement();
    
    // 初始化筛选功能
    initFilters();
    
    // 初始化表格交互
    initTableInteraction();
    
    // 初始化分布图功能
    initSeatMap();
    
    // 添加动画效果
    addAnimationEffects();
});

// 初始化座位管理功能
function initSeatManagement() {
    console.log('座位管理功能初始化完成');
    
    // 设置页面标题
    document.title = '座位管理 - 图书馆管理系统';
}

// 初始化筛选功能
function initFilters() {
    // 获取所有筛选下拉框
    const filters = document.querySelectorAll('.filter-container select');
    
    // 为每个筛选框添加事件监听器
    filters.forEach(filter => {
        filter.addEventListener('change', function() {
            console.log('筛选条件变更:', this.name, this.value);
            // 模拟筛选操作
            simulateFiltering();
        });
    });
    
    // 模拟筛选操作
    function simulateFiltering() {
        // 显示加载动画
        showLoading();
        
        // 模拟网络请求延迟
        setTimeout(() => {
            hideLoading();
            // 这里应该是实际的表格数据更新逻辑
            showToast('筛选条件已应用');
        }, 500);
    }
}

// 初始化表格交互
function initTableInteraction() {
    // 获取表格元素
    const table = document.getElementById('seatTable');
    const tbody = table.querySelector('tbody');
    const checkboxes = table.querySelectorAll('input[type="checkbox"]');
    
    // 全选/取消全选功能
    const headerCheckbox = table.querySelector('thead input[type="checkbox"]');
    headerCheckbox.addEventListener('change', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    
    // 表格行悬停效果已在CSS中定义
    
    // 操作按钮事件处理
    const actionButtons = table.querySelectorAll('.action-btn');
    actionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const row = this.closest('tr');
            const seatId = row.cells[1].textContent;
            
            if (this.classList.contains('view')) {
                viewSeatDetails(seatId);
            } else if (this.classList.contains('edit')) {
                editSeat(seatId);
            } else if (this.classList.contains('delete')) {
                deleteSeat(seatId);
            }
        });
    });
    
    // 分页功能
    const paginationLinks = document.querySelectorAll('.pagination a');
    paginationLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除当前活动状态
            document.querySelectorAll('.pagination a.active').forEach(active => {
                active.classList.remove('active');
            });
            
            // 设置新的活动状态
            this.classList.add('active');
            
            // 模拟加载新页面数据
            showLoading();
            setTimeout(() => {
                hideLoading();
                showToast(`已切换到第${this.textContent}页`);
            }, 500);
        });
    });
    
    // 批量操作可以在这里实现
}

// 查看座位详情
function viewSeatDetails(seatId) {
    console.log('查看座位详情:', seatId);
    // 模拟查看座位详情
    showToast(`查看座位 ${seatId} 的详情`);
    // 实际项目中这里应该打开详情模态框
}

// 编辑座位
function editSeat(seatId) {
    console.log('编辑座位:', seatId);
    // 模拟编辑座位
    showToast(`编辑座位 ${seatId}`);
    // 实际项目中这里应该打开编辑模态框
}

// 删除座位
function deleteSeat(seatId) {
    console.log('删除座位:', seatId);
    // 模拟删除确认
    if (confirm(`确定要删除座位 ${seatId} 吗？`)) {
        showLoading();
        setTimeout(() => {
            hideLoading();
            showToast(`座位 ${seatId} 已删除`);
            // 实际项目中这里应该从DOM中移除对应的行
        }, 500);
    }
}

// 初始化座位分布图
function initSeatMap() {
    const floorSelect = document.querySelector('.map-controls select');
    
    floorSelect.addEventListener('change', function() {
        const floor = this.value;
        console.log('切换到楼层:', floor);
        
        // 显示加载动画
        showLoading();
        
        // 模拟加载座位分布图
        setTimeout(() => {
            hideLoading();
            updateSeatMap(floor);
            showToast(`已加载${floor}楼座位分布图`);
        }, 800);
    });
    
    // 初始化显示1楼座位图
    updateSeatMap(1);
}

// 更新座位分布图
function updateSeatMap(floor) {
    const mapPlaceholder = document.querySelector('.map-placeholder');
    
    // 简单的模拟不同楼层的座位分布
    const floorData = {
        '1': {
            areas: ['A区', 'B区'],
            totalSeats: 350,
            availableSeats: 280
        },
        '2': {
            areas: ['C区', 'D区'],
            totalSeats: 300,
            availableSeats: 250
        },
        '3': {
            areas: ['E区', 'F区'],
            totalSeats: 280,
            availableSeats: 230
        },
        '4': {
            areas: ['G区', 'H区'],
            totalSeats: 220,
            availableSeats: 190
        },
        '5': {
            areas: ['I区', 'J区'],
            totalSeats: 106,
            availableSeats: 90
        }
    };
    
    const data = floorData[floor];
    
    // 简单显示楼层信息
    mapPlaceholder.innerHTML = `
        <div class="floor-info">
            <h4>${floor}楼座位分布</h4>
            <div class="floor-stats">
                <div class="stat-item">
                    <span class="label">总座位数:</span>
                    <span class="value">${data.totalSeats}</span>
                </div>
                <div class="stat-item">
                    <span class="label">可用座位:</span>
                    <span class="value">${data.availableSeats}</span>
                </div>
                <div class="stat-item">
                    <span class="label">占用率:</span>
                    <span class="value">${Math.round((data.totalSeats - data.availableSeats) / data.totalSeats * 100)}%</span>
                </div>
            </div>
            <div class="areas-list">
                <span class="label">包含区域:</span>
                <span class="areas">${data.areas.join(', ')}</span>
            </div>
            <div class="map-visualization">
                <p>这里将显示实际的座位分布图可视化</p>
            </div>
        </div>
    `;
}

// 添加动画效果
function addAnimationEffects() {
    // 为表格行添加进入动画
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach((row, index) => {
        row.style.opacity = '0';
        row.style.transform = 'translateY(20px)';
        row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        
        setTimeout(() => {
            row.style.opacity = '1';
            row.style.transform = 'translateY(0)';
        }, 100 * index);
    });
    
    // 为卡片添加进入动画
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 200 + 150 * index);
    });
}

// 显示加载动画
function showLoading() {
    // 检查是否已经存在加载元素
    let loadingOverlay = document.querySelector('.loading-overlay');
    
    if (!loadingOverlay) {
        loadingOverlay = document.createElement('div');
        loadingOverlay.className = 'loading-overlay';
        loadingOverlay.innerHTML = `
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        `;
        document.body.appendChild(loadingOverlay);
    }
    
    loadingOverlay.style.display = 'flex';
}

// 隐藏加载动画
function hideLoading() {
    const loadingOverlay = document.querySelector('.loading-overlay');
    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
}

// 显示提示消息
function showToast(message) {
    // 检查是否已经存在toast元素
    let toast = document.querySelector('.toast');
    
    if (!toast) {
        toast = document.createElement('div');
        toast.className = 'toast';
        document.body.appendChild(toast);
    }
    
    // 设置消息内容
    toast.textContent = message;
    
    // 显示toast
    toast.classList.add('show');
    
    // 3秒后自动隐藏
    setTimeout(() => {
        toast.classList.remove('show');
    }, 3000);
}

// 导出座位数据
function exportSeatData() {
    console.log('导出座位数据');
    showLoading();
    
    // 模拟导出过程
    setTimeout(() => {
        hideLoading();
        showToast('座位数据导出成功');
    }, 1500);
}

// 批量删除座位
function batchDeleteSeats() {
    const selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
    
    if (selectedCheckboxes.length === 0) {
        showToast('请选择要删除的座位');
        return;
    }
    
    if (confirm(`确定要删除选中的 ${selectedCheckboxes.length} 个座位吗？`)) {
        showLoading();
        
        // 模拟删除过程
        setTimeout(() => {
            hideLoading();
            showToast(`已删除 ${selectedCheckboxes.length} 个座位`);
            // 实际项目中这里应该从DOM中移除对应的行
        }, 1000);
    }
}

// 刷新座位数据
function refreshSeatData() {
    console.log('刷新座位数据');
    showLoading();
    
    // 模拟刷新过程
    setTimeout(() => {
        hideLoading();
        showToast('座位数据已刷新');
    }, 1000);
}

// 注册顶部操作按钮事件
const actionButtons = document.querySelectorAll('.action-buttons button');
actionButtons.forEach(button => {
    button.addEventListener('click', function() {
        if (this.querySelector('.fa-plus')) {
            showToast('打开新增座位对话框');
        } else if (this.querySelector('.fa-download')) {
            exportSeatData();
        } else if (this.querySelector('.fa-refresh')) {
            refreshSeatData();
        }
    });
});

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // Ctrl+R 刷新数据
    if (e.ctrlKey && e.key === 'r') {
        e.preventDefault();
        refreshSeatData();
    }
    
    // Ctrl+E 导出数据
    if (e.ctrlKey && e.key === 'e') {
        e.preventDefault();
        exportSeatData();
    }
});

// 响应式布局调整
window.addEventListener('resize', function() {
    adjustTableLayout();
});

function adjustTableLayout() {
    const tableContainer = document.querySelector('.table-container');
    const table = document.getElementById('seatTable');
    
    if (window.innerWidth < 768) {
        tableContainer.classList.add('scrollable');
    } else {
        tableContainer.classList.remove('scrollable');
    }
}

// 初始化表格布局
adjustTableLayout();

// 模拟实时数据更新
function simulateRealTimeUpdates() {
    setInterval(() => {
        const randomRow = Math.floor(Math.random() * document.querySelectorAll('tbody tr').length);
        const row = document.querySelectorAll('tbody tr')[randomRow];
        const statusCell = row.querySelector('.status');
        
        // 随机切换一些座位的状态
        if (statusCell.classList.contains('active')) {
            statusCell.textContent = '占用';
            statusCell.className = 'status pending';
        } else if (statusCell.classList.contains('pending')) {
            statusCell.textContent = '可用';
            statusCell.className = 'status active';
        }
    }, 15000); // 每15秒模拟一次状态变化
}

// 启动实时数据更新模拟
simulateRealTimeUpdates();

// 提供导出CSV格式的函数（实际项目中可能会使用更复杂的CSV生成库）
function exportToCSV() {
    // 模拟生成CSV数据
    let csvContent = '座位号,区域,楼层,类型,状态,使用率,最后维护\n';
    
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const rowData = [];
        
        // 收集表格数据（跳过复选框和操作列）
        for (let i = 1; i < cells.length - 1; i++) {
            let cellText = cells[i].textContent.trim();
            // 如果是状态列，提取文本内容
            if (cells[i].querySelector('.status')) {
                cellText = cells[i].querySelector('.status').textContent.trim();
            }
            rowData.push(`"${cellText}"`);
        }
        
        csvContent += rowData.join(',') + '\n';
    });
    
    // 创建下载链接
    const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `座位数据_${new Date().toISOString().slice(0, 10)}.csv`);
    document.body.appendChild(link);
    
    // 触发下载
    link.click();
    
    // 清理
    document.body.removeChild(link);
}

// 搜索功能
function initSearch() {
    const searchBox = document.querySelector('.search-box input');
    
    searchBox.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const tableRows = document.querySelectorAll('tbody tr');
        
        tableRows.forEach(row => {
            const seatId = row.cells[1].textContent.toLowerCase();
            const area = row.cells[2].textContent.toLowerCase();
            const floor = row.cells[3].textContent.toLowerCase();
            
            if (seatId.includes(searchTerm) || area.includes(searchTerm) || floor.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
}

// 初始化搜索功能
initSearch();

// 提供API: 可以被其他脚本调用的公共方法
export const SeatManagement = {
    refreshData: refreshSeatData,
    exportData: exportToCSV,
    batchDelete: batchDeleteSeats,
    getSelectedSeats: function() {
        const selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
        const selectedSeats = [];
        
        selectedCheckboxes.forEach(checkbox => {
            const row = checkbox.closest('tr');
            selectedSeats.push(row.cells[1].textContent);
        });
        
        return selectedSeats;
    }
};